const tableData = [
    {id: 1, projectNumber: 'Ⅰ-17', name: '走马镇民间故事', category: '民间文学', publishTime: '2006(第一批)', region: '重庆市九龙坡区', protectionUnit: '重庆市九龙坡区文化馆'},
    {id: 2, projectNumber: 'Ⅰ-124', name: '酉阳古歌', category: '民间文学', publishTime: '2011(第三批)', region: '重庆市酉阳土家族苗族自治县', protectionUnit: '酉阳土家族苗族自治县文化馆（酉阳土家族苗族自治县文化生态保护中心、酉阳土家族苗族自治县非物质文化遗产保护中心）'},
    {id: 3, projectNumber: 'Ⅰ-149', name: '广阳镇民间故事', category: '民间文学', publishTime: '2014(第四批)', region: '重庆市南岸区', protectionUnit: '重庆市南岸区文化馆'},
    {id: 4, projectNumber: 'Ⅱ-15', name: '石柱土家啰儿调', category: '传统音乐', publishTime: '2006(第一批)', region: '重庆市石柱土家族自治县', protectionUnit: '石柱土家族自治县文化生态保护管理中心'},
    {id: 5, projectNumber: 'Ⅱ-24', name: '川江号子', category: '传统音乐', publishTime: '2006(第一批)', region: '重庆市', protectionUnit: '重庆市文化研究院（重庆市非物质文化遗产保护中心、重庆市文化行业特有工种职业技能鉴定站）'},
    {id: 6, projectNumber: 'Ⅱ-25', name: '南溪号子', category: '传统音乐', publishTime: '2006(第一批)', region: '重庆市黔江区', protectionUnit: '重庆市黔江区文化生态保护管理中心'},
    {id: 7, projectNumber: 'Ⅱ-26', name: '木洞山歌', category: '传统音乐', publishTime: '2006(第一批)', region: '重庆市巴南区', protectionUnit: '重庆市巴南区木洞镇文化服务中心'},
    {id: 8, projectNumber: 'Ⅱ-37', name: '唢呐艺术（永城吹打）', category: '传统音乐', publishTime: '2008(第二批)', region: '重庆市綦江区', protectionUnit: '重庆市綦江区文化馆'},
    {id: 9, projectNumber: 'Ⅱ-52', name: '吹打（接龙吹打）', category: '传统音乐', publishTime: '2006(第一批)', region: '重庆市巴南区', protectionUnit: '重庆市巴南区接龙镇文化体育服务中心'},
    {id: 10, projectNumber: 'Ⅱ-52', name: '吹打（金桥吹打）', category: '传统音乐', publishTime: '2006(第一批)', region: '重庆市万盛区', protectionUnit: '重庆市万盛经济技术开发区文化馆'},
    {id: 11, projectNumber: 'Ⅱ-53', name: '梁平癞子锣鼓', category: '传统音乐', publishTime: '2006(第一批)', region: '重庆市梁平县', protectionUnit: '重庆市梁平区文化遗产保护中心'},
    {id: 12, projectNumber: 'Ⅱ-84', name: '秀山民歌', category: '传统音乐', publishTime: '2008(第二批)', region: '重庆市秀山土家族苗族自治县', protectionUnit: '秀山土家族苗族自治县文化馆'},
    {id: 13, projectNumber: 'Ⅱ-85', name: '酉阳民歌', category: '传统音乐', publishTime: '2008(第二批)', region: '重庆市酉阳土家族苗族自治县', protectionUnit: '酉阳土家族苗族自治县文化馆（酉阳土家族苗族自治县文化生态保护中心、酉阳土家族苗族自治县非物质文化遗产保护中心）'},
    {id: 14, projectNumber: 'Ⅱ-101', name: '搬运号子（梁平抬儿调）', category: '传统音乐', publishTime: '2008(第二批)', region: '重庆市梁平县', protectionUnit: '重庆市梁平区文化遗产保护中心'},
    {id: 15, projectNumber: 'Ⅱ-101', name: '搬运号子（龙骨坡抬工号子）', category: '传统音乐', publishTime: '2008(第二批)', region: '重庆市巫山县', protectionUnit: '巫山县文化馆（巫山县艺术团）'},
    {id: 16, projectNumber: 'Ⅱ-109', name: '苗族民歌', category: '传统音乐', publishTime: '2014(第四批)', region: '重庆市彭水苗族土家族自治县', protectionUnit: '彭水苗族土家族自治县文化馆'},
    {id: 17, projectNumber: 'Ⅱ-123', name: '锣鼓艺术（小河锣鼓）', category: '传统音乐', publishTime: '2011(第三批)', region: '重庆市渝北区', protectionUnit: '重庆市渝北区文化遗产保护中心'},
    {id: 18, projectNumber: 'Ⅲ-4', name: '龙舞（铜梁龙舞）', category: '传统舞蹈', publishTime: '2006(第一批)', region: '重庆市', protectionUnit: '重庆市铜梁区文化馆（重庆市铜梁区龙文化发展研究中心、重庆市铜梁区非物质文化遗产中心）'},
    {id: 19, projectNumber: 'Ⅲ-5', name: '狮舞（高台狮舞）', category: '传统舞蹈', publishTime: '2011(第三批)', region: '重庆市彭水苗族土家族自治县', protectionUnit: '彭水苗族土家族自治县文化馆'},
    {id: 20, projectNumber: 'Ⅲ-17', name: '土家族摆手舞（酉阳摆手舞）', category: '传统舞蹈', publishTime: '2008(第二批)', region: '重庆市酉阳土家族苗族自治县', protectionUnit: '酉阳土家族苗族自治县文化馆（酉阳土家族苗族自治县文化生态保护中心、酉阳土家族苗族自治县非物质文化遗产保护中心）'},
    {id: 21, projectNumber: 'Ⅲ-121', name: '玩牛', category: '传统舞蹈', publishTime: '2014(第四批)', region: '重庆市石柱土家族自治县', protectionUnit: '石柱土家族自治县文化生态保护管理中心'},
    {id: 22, projectNumber: 'Ⅳ-12', name: '川剧', category: '传统戏剧', publishTime: '2006(第一批)', region: '重庆市', protectionUnit: '重庆市川剧院'},
    {id: 23, projectNumber: 'Ⅳ-77', name: '灯戏（梁山灯戏）', category: '传统戏剧', publishTime: '2006(第一批)', region: '重庆市梁平县', protectionUnit: '重庆市梁平区文化遗产保护中心'},
    {id: 24, projectNumber: 'Ⅳ-157', name: '阳戏（酉阳土家面具阳戏）', category: '传统戏剧', publishTime: '2021(第五批)', region: '重庆市酉阳土家族苗族自治县', protectionUnit: '酉阳土家族苗族自治县文化馆（酉阳土家族苗族自治县文化生态保护中心、酉阳土家族苗族自治县非物质文化遗产保护中心）'},
    {id: 25, projectNumber: 'Ⅴ-75', name: '四川扬琴', category: '曲艺', publishTime: '2011(第三批)', region: '重庆市曲艺团', protectionUnit: '重庆市曲艺团有限责任公司'},
    {id: 26, projectNumber: 'Ⅴ-76', name: '四川竹琴', category: '曲艺', publishTime: '2008(第二批)', region: '重庆市三峡曲艺团', protectionUnit: '重庆市三峡曲艺保护传承中心（重庆市三峡曲艺团）'},
    {id: 27, projectNumber: 'Ⅴ-77', name: '四川清音', category: '曲艺', publishTime: '2011(第三批)', region: '重庆市曲艺团', protectionUnit: '重庆市曲艺团有限责任公司'},
    {id: 28, projectNumber: 'Ⅴ-88', name: '车灯', category: '曲艺', publishTime: '2008(第二批)', region: '重庆市曲艺团', protectionUnit: '重庆市曲艺团有限责任公司'},
    {id: 29, projectNumber: 'Ⅴ-91', name: '金钱板', category: '曲艺', publishTime: '2011(第三批)', region: '重庆市万州区', protectionUnit: '重庆市万州区文化馆'},
    {id: 30, projectNumber: 'Ⅴ-110', name: '四川评书', category: '曲艺', publishTime: '2011(第三批)', region: '重庆市曲艺团', protectionUnit: '重庆市曲艺团有限责任公司'},
    {id: 31, projectNumber: 'Ⅵ-109', name: '蹬技（重庆蹬技）', category: '传统体育、游艺与杂技', publishTime: '2021(第五批)', region: '重庆市', protectionUnit: '重庆杂技艺术团有限责任公司'},
    {id: 32, projectNumber: 'Ⅶ-10', name: '梁平木版年画', category: '传统美术', publishTime: '2006(第一批)', region: '重庆市梁平县', protectionUnit: '重庆市梁平区文化遗产保护中心'},
    {id: 33, projectNumber: 'Ⅶ-21', name: '蜀绣', category: '传统美术', publishTime: '2008(第二批)', region: '重庆市渝中区', protectionUnit: '重庆市渝中区文物保护管理所（重庆市渝中区非物质文化遗产保护中心、重庆市渝中区母城文化研究中心、重庆市渝中区博物馆）'},
    {id: 34, projectNumber: 'Ⅶ-25', name: '挑花（巫溪嫁花）', category: '传统美术', publishTime: '2021(第五批)', region: '重庆市巫溪县', protectionUnit: '巫溪县文化馆'},
    {id: 35, projectNumber: 'Ⅶ-51', name: '竹编（梁平竹帘）', category: '传统美术', publishTime: '2008(第二批)', region: '重庆市梁平县', protectionUnit: '重庆市梁平区文化遗产保护中心'},
    {id: 36, projectNumber: 'Ⅶ-56', name: '石雕（大足石雕）', category: '传统美术', publishTime: '2021(第五批)', region: '重庆市大足区', protectionUnit: '重庆市大足区美术馆（重庆市大足区非物质文化遗产保护中心）'},
    {id: 37, projectNumber: 'Ⅶ-58', name: '木雕（奉节木雕）', category: '传统美术', publishTime: '2021(第五批)', region: '重庆市奉节县', protectionUnit: '奉节县文化馆（奉节县非物质文化遗产保护中心）'},
    {id: 38, projectNumber: 'Ⅶ-66', name: '彩扎（铜梁龙灯彩扎）', category: '传统美术', publishTime: '2021(第五批)', region: '重庆市铜梁区', protectionUnit: '重庆市铜梁区文化馆（重庆市铜梁区龙文化发展研究中心、重庆市铜梁区非物质文化遗产中心）'},
    {id: 39, projectNumber: 'Ⅶ-81', name: '制扇技艺（荣昌折扇）', category: '传统技艺', publishTime: '2008(第二批)', region: '重庆市荣昌县', protectionUnit: '重庆市荣昌区文物保护管理所（重庆市荣昌区填川移民文化研究中心、重庆市荣昌区文化遗产保护中心）'},
    {id: 40, projectNumber: 'Ⅶ-98', name: '陶器烧制技艺（荣昌陶器制作技艺）', category: '传统技艺', publishTime: '2011(第三批)', region: '重庆市荣昌县', protectionUnit: '重庆市荣昌区安富街道文化服务中心'},
    {id: 41, projectNumber: 'Ⅶ-102', name: '夏布织造技艺', category: '传统技艺', publishTime: '2008(第二批)', region: '重庆市荣昌县', protectionUnit: '重庆市荣昌区文物保护管理所（重庆市荣昌区填川移民文化研究中心、重庆市荣昌区文化遗产保护中心）'},
    {id: 42, projectNumber: 'Ⅶ-127', name: '漆器髹饰技艺（重庆漆器髹饰技艺）', category: '传统技艺', publishTime: '2008(第二批)', region: '重庆市', protectionUnit: '重庆市文化研究院（重庆市非物质文化遗产保护中心、重庆市文化行业特有工种职业技能鉴定站）'},
    {id: 43, projectNumber: 'Ⅶ-156', name: '豆豉酿制技艺（永川豆豉酿制技艺）', category: '传统技艺', publishTime: '2008(第二批)', region: '重庆市', protectionUnit: '重庆市永川豆豉食品有限公司'},
    {id: 44, projectNumber: 'Ⅶ-159', name: '榨菜传统制作技艺（涪陵榨菜传统制作技艺）', category: '传统技艺', publishTime: '2008(第二批)', region: '重庆市涪陵区', protectionUnit: '重庆市涪陵辣妹子集团有限公司'},
    {id: 45, projectNumber: 'Ⅶ-211', name: '土家族吊脚楼营造技艺', category: '传统技艺', publishTime: '2011(第三批)', region: '重庆市石柱土家族自治县', protectionUnit: '石柱土家族自治县文化生态保护管理中心'},
    {id: 46, projectNumber: 'Ⅸ-4', name: '中医传统制剂方法（桐君阁传统丸剂制作技艺）', category: '传统医药', publishTime: '2006(第一批)', region: '重庆市', protectionUnit: '太极集团重庆桐君阁药厂有限公司'},
    {id: 47, projectNumber: 'Ⅸ-5', name: '针灸（刘氏刺熨疗法）', category: '传统医药', publishTime: '2014(第四批)', region: '重庆市南岸区', protectionUnit: '重庆刘少林堂中医诊所有限公司'},
    {id: 48, projectNumber: 'Ⅸ-5', name: '针灸（赵氏雷火灸）', category: '传统医药', publishTime: '2014(第四批)', region: '重庆市渝中区', protectionUnit: '重庆市渝中区赵氏雷火灸传统医药研究所'},
    {id: 49, projectNumber: 'Ⅸ-6', name: '中医正骨疗法（燕青门正骨疗法）', category: '传统医药', publishTime: '2021(第五批)', region: '重庆市江北区', protectionUnit: '重庆正刚中医骨科医院有限公司'},
    {id: 50, projectNumber: 'Ⅹ-51', name: '秀山花灯', category: '民俗', publishTime: '2008(第二批)', region: '重庆市秀山土家族苗族自治县', protectionUnit: '秀山土家族苗族自治县文化馆'},
    {id: 51, projectNumber: 'Ⅹ-84', name: '庙会（宝顶架香庙会）', category: '民俗', publishTime: '2014(第四批)', region: '重庆市大足区', protectionUnit: '重庆市大足区美术馆（重庆市大足区非物质文化遗产保护中心）'},
    {id: 52, projectNumber: 'Ⅹ-84', name: '庙会（丰都庙会）', category: '民俗', publishTime: '2014(第四批)', region: '重庆市丰都县', protectionUnit: '丰都县文化馆'},
    {id: 53, projectNumber: 'Ⅹ-163', name: '秀山苗族羊马节', category: '民俗', publishTime: '2021(第五批)', region: '重庆市秀山土家族苗族自治县', protectionUnit: '秀山土家族苗族自治县文化馆'}
];
const rowsPerPage = 10;
let currentPage = 1;

// 渲染表格函数
function renderTable() {
    const tbody = document.querySelector('tbody');
    tbody.innerHTML = '';

    const start = (currentPage - 1) * rowsPerPage;
    const end = Math.min(start + rowsPerPage, tableData.length);

    for (let i = start; i < end; i++) {
        const row = tableData[i];
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${row.id}</td>
            <td>${row.projectNumber}</td>
            <td>${row.name}</td>
            <td>${row.category}</td>
            <td>${row.publishTime}</td>
            <td>${row.region}</td>
            <td>${row.protectionUnit}</td>
        `;
        tbody.appendChild(tr);
    }
}

renderTable();

function updatePaginationButtons() {
    const buttons = document.querySelectorAll('.pagination button');
    const prePage = document.querySelector('.pre-page');
    const nextPage = document.querySelector('.next-page');
    const totalPages = Math.ceil(tableData.length / rowsPerPage);

    // 删除原有的分页按钮
    buttons.forEach(button => button.remove());

    // 创建新的分页按钮
    for (let i = 1; i <= totalPages; i++) {
        const button = document.createElement('button');
        button.textContent = i;
        if (i === currentPage) {
            button.classList.add('active');
        }
        button.addEventListener('click', () => goToPage(i));
        document.querySelector('.pagination').insertBefore(button, nextPage);
    }

    // 更新上一页和下一页按钮的状态
    if (currentPage === 1) {
        prePage.classList.add('disabled');
        prePage.style.cursor = 'not-allowed';
    } else {
        prePage.classList.remove('disabled');
        prePage.style.cursor = 'pointer';
    }

    if (currentPage === totalPages) {
        nextPage.classList.add('disabled');
        nextPage.style.cursor = 'not-allowed';
    } else {
        nextPage.classList.remove('disabled');
        nextPage.style.cursor = 'pointer';
    }
}

function goToPage(page) {
    if (page < 1 || page > Math.ceil(tableData.length / rowsPerPage)) return;
    currentPage = page;
    renderTable();
    updatePaginationButtons();
    window.scrollTo(0, 0);
}

document.querySelector('.pre-page').addEventListener('click', () => {
    if (currentPage > 1) goToPage(currentPage - 1);
});

document.querySelector('.next-page').addEventListener('click', () => {
    if (currentPage < Math.ceil(tableData.length / rowsPerPage)) goToPage(currentPage + 1);
});

document.querySelectorAll('.pagination button').forEach((button, index) => {
    button.addEventListener('click', () => {
        const page = index + 1;
        goToPage(page);
    });
});

updatePaginationButtons();

//const rowsPerPage = 10;
//let currentPage = 1;
//let filteredData = tableData; // 初始时，过滤后的数据是所有数据

//// 渲染表格函数
//function renderTable() {
//    const tbody = document.querySelector('tbody');
//    tbody.innerHTML = '';

//    const start = (currentPage - 1) * rowsPerPage;
//    const end = Math.min(start + rowsPerPage, filteredData.length); // 使用过滤后的数据

//    for (let i = start; i < end; i++) {
//        const row = filteredData[i]; // 使用过滤后的数据
//        const tr = document.createElement('tr');
//        tr.innerHTML = `
//            <td>${row.id}</td>
//            <td>${row.projectNumber}</td>
//            <td>${row.name}</td>
//            <td>${row.category}</td>
//            <td>${row.publishTime}</td>
//            <td>${row.region}</td>
//            <td>${row.protectionUnit}</td>
//        `;
//        tbody.appendChild(tr);
//    }
//}

//// 根据选中的区域筛选数据并更新表格
//function filterData() {
//    const selectedRegion = document.getElementById('region-input').value; // 获取选中的区域
//    console.log('Selected Region:', selectedRegion);  // 检查选中的区域

//    // 过滤数据
//    if (selectedRegion === '全部') {
//        filteredData = tableData;
//    } else {
//        filteredData = tableData.filter(item => item.region.includes(selectedRegion));
//    }

//    console.log('Filtered Data:', filteredData);  // 检查过滤后的数据

//    // 更新表格
//    renderTable();
//    updatePaginationButtons();
//}

//// 更新分页按钮
//function updatePaginationButtons() {
//    const pageButtonsContainer = document.querySelector('.page-buttons');
//    const prePage = document.querySelector('.pre-page');
//    const nextPage = document.querySelector('.next-page');
//    const totalPages = Math.ceil(filteredData.length / rowsPerPage); // 计算过滤后的数据总页数

//    // 清空现有的按钮
//    pageButtonsContainer.innerHTML = '';

//    // 创建新的分页按钮
//    for (let i = 1; i <= totalPages; i++) {
//        const button = document.createElement('button');
//        button.textContent = i;
//        if (i === currentPage) {
//            button.classList.add('active');
//        }
//        button.addEventListener('click', () => goToPage(i));
//        pageButtonsContainer.appendChild(button);
//    }

//    // 更新上一页和下一页按钮的状态
//    if (currentPage === 1) {
//        prePage.classList.add('disabled');
//        prePage.style.cursor = 'not-allowed';
//    } else {
//        prePage.classList.remove('disabled');
//        prePage.style.cursor = 'pointer';
//    }

//    if (currentPage === totalPages) {
//        nextPage.classList.add('disabled');
//        nextPage.style.cursor = 'not-allowed';
//    } else {
//        nextPage.classList.remove('disabled');
//        nextPage.style.cursor = 'pointer';
//    }
//}

//// 切换到指定页面
//function goToPage(page) {
//    if (page < 1 || page > Math.ceil(filteredData.length / rowsPerPage)) return;
//    currentPage = page;
//    renderTable();
//    updatePaginationButtons();
//    window.scrollTo(0, 0); // 页面滚动到顶部
//}

//// 上一页按钮事件
//document.querySelector('.pre-page').addEventListener('click', () => {
//    if (currentPage > 1) goToPage(currentPage - 1);
//});

//// 下一页按钮事件
//document.querySelector('.next-page').addEventListener('click', () => {
//    if (currentPage < Math.ceil(filteredData.length / rowsPerPage)) goToPage(currentPage + 1);
//});

//// 绑定搜索按钮点击事件
//document.getElementById('search-button').addEventListener('click', () => {
//    filterData();  // 点击搜索时筛选数据并更新表格
//});

//// 初始化分页按钮
//document.querySelectorAll('.pagination button').forEach((button, index) => {
//    button.addEventListener('click', () => {
//        const page = index + 1;
//        goToPage(page);
//    });
//});

//// 页面加载时初始化
//window.onload = function () {
//    renderTable();  // 初始渲染所有数据
//    updatePaginationButtons();  // 初始化分页按钮
//};
